<template>
	<view   :class="{'root-node':true,'root-bg':isNewPage}">
		<!--新版页面-->
		<view class="" v-if="is_show">

		<template v-if="isNewPage" class="content-box">
			
			<my-home class="home-float" :style="{bottom:'100rpx',right:'50rpx'}" v-if="paste == 1"
				:floatData="floatData" :floatX="floatX" :floatY="floatY" :floatFrom="15"></my-home>
				
			<view
				:class="{content:true,scroll:(guide=='show')&&(guideStatus==1 || guideStatus==2),posi:(guide=='show') && (guideStatus==3) && isScroll}">
				<!--top-->
				<view class="top">
					<view class="top-height" :style="{height:capsuleTop}"></view>
					<view class="top-bg">
						<view class="top-content-wrap">
							<!--logo-->
							<view class="logo" :style="{height:capsuleHeight}">
								<image class="logo-image" mode="" :src="otherData.logo"></image>
							</view>
							<!-- icon -->
							<image class="icon-01" mode="widthFix" :src="icon8"></image>
							<image class="icon-02" mode="widthFix" :src="icon7"></image>
							<image class="icon-03" mode="widthFix" :src="icon6"></image>
						</view>
					</view>
					<!--notice-bar-滚动条-->
					<view class="notice-bar notice-new">
						<u-notice-bar v-if="noticeList[0]" color="#fff" padding="0 0" type="none" mode="horizontal"
							:list="noticeList">
						</u-notice-bar>
					</view>
					<!-- card -->
					<view class="card">
						<view class="card-content">
							<!-- <view class="" v-if="paste == 1">
								<image class="card-content-img1"
									src="https://images.cd1a.cn/applet_img_bank/uni/makeMoney/makeMoneyXF.png" alt=""
									@click="floaTingFn">
									<image  class="card-content-img1" src="https://images.cd1a.cn/applet_img_bank/uni/maintain/gif1.gif" mode="">
							</view> -->
							<view class="avatar-posi">
								<image class="vip-avatar" v-if="otherData.isVip" mode="widthFix"
									src="../../static/images/vip.png"></image>

								<image class="avatar" mode="widthFix" :src="cardData.avatar"></image>
							</view>
							<view>
								<view class="card-title">{{cardData.title}}</view>
								<view v-if="cardData.locationTxt" class="card-aside">
									<image class="card-pos" mode="heightFix" :src="icon9"></image>
									<text class="card-address">{{cardData.locationTxt}}</text>
								</view>
							</view>
							<view class="card-button" v-if="guideStatus!=2">
								<view class="" v-if="hasUserInfo">
									<uv-btn shape="circle" color="#1B1B1B" size="mini"
										background="linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%)"
										@click="handlePersonalCenterClick" text="个人中心"></uv-btn>
									<text class="card-addresss">{{cardData.user_id}}</text>
								</view>

								<!--微信-->
								<!-- #ifdef MP-WEIXIN -->
								<uv-btn v-else shape="circle" color="#1B1B1B" size="mini"
									background="linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%)"
									@click="handleUserInfo" text="立即登录"></uv-btn>
								<!-- #endif -->
								<!--支付宝-->
								<!-- #ifdef MP-ALIPAY -->
								<uv-btn v-else shape="circle" color="#1B1B1B" size="mini"
									background="linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%)"
									@click="handleUserInfo" text="立即登录"></uv-btn>
								<!-- #endif -->

							</view>
						</view>
					</view>
				</view>
				<!--menu-->
				<view class="menu">
					<!--滑动布局-->
					<swiper class="swiper" v-if="menuList.length>1">
						<swiper-item v-for="(item,i) in menuList" :key="i" class="swiper-item-com">
							<view class="swiper-wrap">
								<view v-for="(value,j) in item.list" :key="j" class="item-swiper"
									@click="handleMenuClick(value.url,value.originalData)">
									<image class="menu-img" mode="scaleToFill" :src="value.imgUrl"></image>
									<view class="item-swiper-main">
										<view class="swiper-title">{{value.title}}</view>
										<view class="swiper-content">{{value.content}}</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<!--固定不滑动布局-->
					<view class="swiper" v-else>
						<view v-for="(item,i) in menuList" :key="i">
							<view class="swiper-wrap">
								<view v-for="(value,j) in item.list" :key="j" class="item-swiper"
									@click="handleMenuClick(value.url,value.originalData)">
									<image class="menu-img" mode="scaleToFill" :src="value.imgUrl"></image>
									<view class="item-swiper-main">
										<view class="swiper-title">{{value.title}}</view>
										<view class="swiper-content">{{value.content}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--banner-->
				<view class="banner">
					<u-swiper bg-color="#F0F0F0" :list="bannerList" indicator-pos="bottomLeft" :circular="false"
						:height="bannerHeight" @click="handleBannerClick"></u-swiper>
				</view>
				<!--charge-->
				<view :class="{'charge':true,'charge-posi':(guide=='show')&&(guideStatus==3)}">
					<view class="charge-wrap" @click="$u.throttle(handleStartChargingClick,1000,true)">

						<image class="flash-img" mode="widthFix" webp
							v-if="!(guide=='show' && guideStatus==3) && startChargingJump!='/pages/charge/index'"
							:src="icon5">
						</image>
						<image class="charge-img" mode="widthFix" :src="icon4">
						</image>

						<template v-if="(guide=='show')&&(guideStatus==3)">
							<view class="charge-content">
								<view>开始</view>
								<view>充电</view>
							</view>
						</template>
						<template v-else>
							<view class="charge-content" v-if="startChargingJump=='/pages/charge/index'">
								<view>开始</view>
								<view>充电</view>
							</view>
							<!--如果跳转去的不是充电端口开启页面此时需要显示正在充电中文字-->
							<view class="charge-content" v-else>
								<view>正在</view>
								<view>充电</view>
							</view>
						</template>
					</view>
				</view>
				<view class="bottom-padding"></view>
				<!--safe-area-->
				<view class="bottom-safe-area"></view>

				<!--引导图-->
				<view class="guide-container" v-if="guide=='show'">
					<!--第一步-->
					<view class="guide-01-wrap" v-if="guideStatus==1" :style="{paddingTop:capsuleTop}">
						<view class="guide-01-img-wrap">

							<image @click="handleNextClick1" class="guide-01-img" mode="scaleToFill"
								:src="guideData.imgUrl">
							</image>
							<view class="item-swiper-main">
								<view class="swiper-title">{{guideData.title}}</view>
								<view class="swiper-content">{{guideData.content}}</view>
							</view>
						</view>
						<image @click="handleNextClick1" class="guide-01" mode="widthFix"
							src="@/static/images/guide-01.png"></image>
						<view class="guide-01-tips">
							<view @click="handleNextClick1">点击这里开始充电</view>
						</view>
						<view class="guide-01-bottom">
							<view class="guide-01-jump" @click="handleGuideJump">跳过</view>
							<view class="guide-01-next" @click="handleNextClick1">下一步</view>
						</view>
					</view>
					<!--第二步-->
					<view class="guide-02-wrap" v-else-if="guideStatus==2" :style="{paddingTop:capsuleTop}">
						<view class="guide-02-btn-wrap">
							<view class="guide-02-btn" @click="handleNextClick2">
								<text>个人中心</text>
							</view>
						</view>
						<view class="guide-02-img">
							<image @click="handleNextClick2" class="guide-02" mode="heightFix"
								src="@/static/images/guide-02.png"></image>
						</view>
						<view class="guide-01-tips">
							<view @click="handleNextClick2">点击这里充值、查看个人记录</view>
						</view>
						<view class="guide-01-bottom">
							<view class="guide-01-jump" @click="handleGuideJump">跳过</view>
							<view class="guide-01-next" @click="handleNextClick2">下一步</view>
						</view>
					</view>
					<!--第三步-->
					<view class="guide-03-wrap" v-else-if="guideStatus==3">
						<view class="guide-01-bottom">
							<view class="guide-01-jump" @click="handleGuideJump">跳过</view>
							<view class="guide-01-next" @click="handleGuideJump">我知道了</view>
						</view>
						<view class="guide-01-tips guide-03-tips">
							<view @click="handleGuideJump">点击这里查看充电进度</view>
						</view>
						<view class="guide-03-img">
							<image @click="handleGuideJump" class="guide-03" mode="heightFix"
								src="@/static/images/guide-03.png"></image>
						</view>
						<view class="bottom-safe-area"></view>
					</view>
				</view>

				<movable-area class="fixed-box" v-if="isServiceShow">
					<movable-view class="fixed-button" direction="vertical" :inertia="true">
						<view class="customer-service">
							<button class="sign-btn-contact" send-message-title="客服会话" show-message-card
								send-message-path="/pages/index/index" open-type='contact'>确 认</button>
							<view>
								<image class="customer-service-img" mode="widthFix" :src="icon3"></image>
							</view>
							<view>在线客服</view>
						</view>
					</movable-view>
				</movable-area>
				<privacyPopup v-if="isPopupShow" @popupSUccess="popupSUccess"></privacyPopup>
				<base-drag v-if="isMapShow" />
			</view>
		</template>
		<!--旧版本页面-->
		<template v-else>
			<view class="old-top">

				<!--充电图标-->
				<view class="old-top-circle" @click="handleOldCircleClick"></view>
				<!--协议-->
				<view class="old-protocol">
					<text @click="handleOldProtocolClick">天天充电《用户使用协议》</text>
				</view>
			</view>
			<!--notice-bar-->
			<view class="notice-bar old-notice-bar">
				<u-notice-bar color="#333" v-if="noticeList[0]" padding="0 0" type="none" mode="horizontal"
					:list="noticeList">
				</u-notice-bar>
			</view>

			<view class="old-btn">
				<view class="old-btn-item">
					<uv-btn v-if="hasUserInfo" shape="circle" background="#0da297" @click="handlePersonalCenterClick"
						text="个人中心"></uv-btn>
					<uv-btn v-else shape="circle" background="#0da297" @click="handleUserInfo" text="个人中心"></uv-btn>
				</view>
				<view class="old-btn-item" v-if="oldData.activityShow">
					<!--h5活动-->
					<uv-btn @click="handleOldActivityClick" background="#0da297" shape="circle"
						:text="oldData.activityName"></uv-btn>
				</view>
			</view>

			<movable-area class="fixed-box" v-if="isServiceShow">
				<movable-view class="fixed-button" direction="vertical" :inertia="true">
					<view class="customer-service">
						<button class="sign-btn-contact" send-message-title="客服会话" show-message-card
							send-message-path="/pages/index/index" open-type='contact'>确 认</button>
						<view>
							<image class="customer-service-img" mode="widthFix" :src="icon3"></image>
						</view>
						<view>在线客服</view>
					</view>
				</movable-view>
			</movable-area>

			<base-drag v-if="isMapShow" />
		</template>
		<customer-service ref="service"></customer-service>
		<!--首页活动弹窗-->
		<common-popup :show="activityPopupShow" :da="popupData" @img-click="handleActivityClick" :img="activityImg"
			@close="handleCloseClick" />
			
			</view>
			
			<special v-else :BurstList="BurstList" :scanCodeUrl="scanCodeUrl"></special>
	</view>
	
</template>

<script>
	import special from './special.vue'
	var timer = null;
	import {
		UPLOAD_URL
	} from '@/env.js';
	import privacyPopup from '@/components/privacyPopup/privacyPopup.vue';
	export default {
		components: {
			privacyPopup,
			special
		},
		data() {
			return {
				isNewPage: true, //是新版页面还是老版页面
				//img
				activityImg: '', //活动弹窗的图片
				icon3: this.$imgUrl + 'index/customer-service.png',
				icon4: this.$imgUrl + 'index/charge.png',
				icon5: this.$imgUrl + 'index/flash4.webp',
				icon6: this.$imgUrl + 'index/icon-03.png',
				icon7: this.$imgUrl + 'index/icon-02.png',
				icon8: this.$imgUrl + 'index/icon-01.png',
				icon9: this.$imgUrl + 'index/position.png',	
				//1.other data
				otherData: {
					logo:'',
					/* logo: this.$imgUrl + 'index/logo.png', */
					isVip: false,
				},
				startChargingJump: '/pages/charge/index', //Jump address to start charging
				isOnlyCode: false,

				isServiceShow: false, //悬浮客服是否显示
				isMapShow: false, //附近网点悬浮显示
				activityPopupShow: false, //通用活动弹窗
				isCommonPopup: false,
				activityData: {},
				popupData: {},
				//2.capsule top
				// #ifdef	MP-WEIXIN
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 'px',
				capsuleHeight: uni.getMenuButtonBoundingClientRect().height + 'px',
				// #endif
				// #ifdef	MP-ALIPAY
				capsuleTop: '6px',
				capsuleHeight: '32px',
				// #endif

				//3.card data
				hasUserInfo: false, //Is there any user information
				cardData: {
					avatar: this.$imgUrl + "index/avatar.png",
					locationTxt: '',
					title: 'Hi，欢迎使用天天充电！',
					user_id: '',
				},
				//4.menu
				menuList: [],
				currentMenu: null,
				isPhoneAuthorization: false, //Whether the user's mobile phone number is authorized
				//5.banner
				bannerList: [],
				currentBanner: null,
				// #ifdef	MP-WEIXIN
				bannerHeight: 200,
				// #endif
				// #ifdef	MP-ALIPAY
				bannerHeight: 180,
				// #endif

				//6.notice
				noticeList: [],
				//7.guide
				guide: 'hide', //show,hide
				guideStatus: 1, //1,2,3 step步骤
				isScroll: false,
				guideData: {
					title: '',
					imgUrl: '',
					content: '',
				},
				//8.微信app扫码扫码相关
				scanCodeUrl: '',
				onOff: true,
				user: '',
				isEquipment: false,
				isJumpTimeSelection: false,
				coreData: null,
				//---活动类
				isActivity: false,
				isFan: false,
				oldData: {
					activityShow: false,
					activityName: '',
					activityUrl: '',
				},
				// 悬浮框
				paste: null, //  1 显示  2 不显示
				avatar: '', // 用户头像
				floatData: {}, // 悬浮框页面数据
				floatX: 300,
				floatY: 160,
				clientHeight: null,
				isPopupShow: false,//判断是否开启隐私协议弹窗
				pasteUrl:'', // 粘贴板新版链接 
				paste_type:1, // 判断手机类型 1安卓 2苹果 3全部
				is_ios:false, //判断是不是ios
				is_show:true, //判断是否走特殊业务
				BurstList:{}, //紧急状态数据
			}
		},
		watch: {
			guide(newVal) {
				if (newVal == 'hide' && this.isCommonPopup) {
					this.activityPopupShow = true;
				} else {
					this.activityPopupShow = false;
				};
			},
		},
		onReady() {
			
		},
		onLoad(options) {
			this.isIos();
			this._wxScanCode(options);
			this.getClineHeight();			
		},
		onShow() {
			this._BurstList();
		},
		methods: {
			isIos() {
						const info = wx.getSystemInfoSync()
						if (info.system.indexOf('Android') > -1) {
							this.is_ios = false
						} else {
							// uni.getDeviceInfo().deviceType
							this.is_ios = true
						}
						
				},
			// 获取手机栏的高度
			getBarHeight() {
				const res = uni.getSystemInfoSync()
				if (res.platform === 'ios') {
					return 44 + res.statusBarHeight
				} else if (res.platform === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0;
				}
			},
			//获取可视区域高度
			getClineHeight() {
				const res = uni.getSystemInfo({
					success: (res => {
						this.clientHeight = res.windowHeight - uni.upx2px(80) - this.getBarHeight();
						this.floatY = this.clientHeight - 50;
					})
				});
			},
			// 同意用户隐私协议
			popupSUccess() {
				uni.setStorageSync('pasteShow',true);
				if(this.is_paste){
				  this.getPastes();		
				}else{
				  this.getPaste();		
				}
				
			},
			
			/* scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						// 识别成功，执行对应操作
					}
				})
			}, */
			// 新版粘贴板
			getPastes() {
				let that = this;
				uni.request({
					url: that.is_paste,
					method: 'get',
					success: res => {
						let privaShow = uni.getStorageSync('privaShow');
						let pasteShow = uni.getStorageSync('pasteShow');
						if(privaShow == 4 || pasteShow){
								if((that.paste_type == 1 && !that.is_ios) || (that.paste_type == 2 && that.is_ios) || that.paste_type == 3 ){
								uni.setClipboardData({
									data: res.data.data ? res.data.data : res.data,
									success(re) {
										wx.hideLoading();
									}
								});	
								}
							}
					}
				})
			},
			// 旧版粘贴板
			getPaste() {
				let that = this;
				that.$u.api.getPaste().then(re => {
					if (re.result_code == 300) {
						//第一次调首页接口粘贴板逻辑不会走，否则系统默认和自定义隐私政策都会弹出
						let privaShow = uni.getStorageSync('privaShow');
						let pasteShow = uni.getStorageSync('pasteShow');
						if(privaShow == 4 || pasteShow){
							if((that.paste_type == 1 && !that.is_ios) || (that.paste_type == 2 && that.is_ios) || that.paste_type == 3 ){
								uni.setClipboardData({
									data: re.data.title,
									success: function() {
										wx.hideLoading();
									}
								});	
								}	
						}
					}

				}).catch(() => {});
			},
			// 突发情况
			_BurstList() {
				let that = this;
				that.$u.api.isBurstApi().then(res => {
					if (res.code == 200) {
						if(res.data.status == 1){
								that.is_show = true;
								//Check if you are logged in正常情况
								if (!uni.getStorageSync('userId')) {
									that.getCodeLoginRequest();
								} else {
									that.getIndexDataRequest();
								};		
								//特殊情况
						}else if(res.data.status == 2){		  
								that.is_show = false;
						}
						  that.BurstList = res.data;
					}else{
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false
						});
					}
				}).catch(() => {
					
				});
			},
			getCodeLoginRequest(params = {}, isAlipayUserinfo = false) {

				uni.login({
					provider: 'weixin',

					// #ifdef	MP-ALIPAY
					scopes: isAlipayUserinfo ? 'auth_user' : 'auth_base',
					// #endif
					success: res => {
						this.$u.api.getCodeLogin({
							code: res.code,
							...params,
							// #ifdef	MP-ALIPAY
							getAuthCode: isAlipayUserinfo ?
								'auth_user' : 'auth_base',
							// #endif
							recommend: this.user ? this.user : '',
						}).then(res => {
							uni.setStorageSync('userId', res.data
								.userid_locked);
							uni.setStorageSync('uid', res.data
								.uid); //uid存储
							if (res.data.phone && res.data.phone
								.length) {
								uni.setStorageSync('userPhone', res.data.phone);
							};
							
							this.getIndexDataRequest();
							// #ifdef	MP-WEIXIN
							if (params.rawData) {
								uni.navigateTo({
									url: '/pages/person/personalCenter'
								});
							};
							// #endif

							// #ifdef	MP-ALIPAY
							if (isAlipayUserinfo) {
								uni.navigateTo({
									url: '/pages/person/personalCenter'
								});
							};
							// #endif

						}).catch();
					}
				});
			},

			//调用首页数据
			getIndexDataRequest() {
				this.$u.api.getIndexData({
					str: '0',
					uid: uni.getStorageSync('uid'),
				}).then( res => {
					//报错在调用一次
					if (res.result_code == 321) {
						this.getCodeLoginRequest();
					} else {
						//悬浮窗
						this.paste = res.data.window.open;
						this.floatData = res.data.window;
						//新页面还是老页面
						this.isNewPage = res.data.is_old == 2;
						
						//顶部卡片布局的数据
						this.hasUserInfo = res.data.is_avatar == 1;
						//粘贴板接口链接
						this.is_paste = res.data.is_paste;
						//粘贴板展示类型
						this.paste_type = res.data.paste_type;
					
						//获取本地缓存
						if (res.data.phone && res.data.phone
							.length) {
							uni.setStorageSync('userPhone', res.data.phone);
						};
						//判断头像有没有变化
						if (res.data.avatarUrl != this.avatar) {
							this.avatar = res.data.avatarUrl;
						}				
						this.cardData = {
							avatar: res.data.avatarUrl ? res.data.avatarUrl : this.$imgUrl +
								'index/avatar.png',
							locationTxt: res.data.location, //社区名称
							title: res.data.nickName,//用户名称
							user_id: res.data.user_id,//用户id
						};
						
						//顶部滚动通知数据
						if (res.data.news) {
							this.noticeList[0] = res.data.news;
						};
						//menu数据
						let list = res.data.list;
						let arr = [];
						let num = Math.ceil(list.length / 4);
						for (let i = 0; i < num; i++) {
							let outsideObj = {};
							//inside
							let resArr = list.splice(0, 4);
							let newArr = [];
							for (let j = 0; j < resArr.length; j++) {
								let insideObj = {

									title: resArr[j].name,
									content: resArr[j].des,
									imgUrl: resArr[j].img,
									url: resArr[j].self_url ? resArr[j]
										.self_url : '',
									originalData: resArr[j],
								};
								//push
								newArr.push(insideObj);
							};
							//outside
							outsideObj.list = newArr;
							arr.push(outsideObj)
						};
						this.menuList = arr;
						//引导图
						this.guideData = {
							title: arr[0].list[0].title,
							imgUrl: arr[0].list[0].imgUrl,
							content: arr[0].list[0].content,
						};
						//bind_phone：1未授权 2授权
						if (res.data.bind_phone == '2') {
							this.isPhoneAuthorization = true;
						} else {
							this.isPhoneAuthorization = false;
						};
						//banner数据
						let banner = Array.isArray(res.data.carousel) ? res.data
							.carousel : [];
						let bannerList = [];
						for (let k = 0; k < banner.length; k++) {
							let obj = {
								image: banner[k].img,
								originalData: banner[k],
							};
							//push
							bannerList.push(obj);
						};
						this.bannerList = bannerList;
						//其它数据

						this.otherData.logo = res.data.logo;
						this.otherData.isVip = res.data.is_vip == '2';
						//页面底部开始充电
						if (res.data.skip == '1') {
							this.startChargingJump = '/pages/charge/index';
						} else if (res.data.skip == '2') {
							this.startChargingJump =
								'/pages/charge/charging?status=1&id=' + res.data
								.user_log_id;
						} else if (res.data.skip == '3') {
							this.startChargingJump =
								'/pages/charge/charging-record';
						};

						//客服
						this.isServiceShow = res.data.open_tell == 2;
						this.$u.vuex('is_service_show', this.isServiceShow);
						this.isMapShow = !!res.data.map;
						//远程开启是否显示：1不是 2是
						if (res.data.is_new != '2') {

							this.isOnlyCode = true;
						} else {
							//正常访问
							this.isOnlyCode = false;
						};

						if (this.onOff) {
							if (this.isEquipment) {
								this.portOpenRequest();
							} else if (this.isActivity) {

								this.activityRequest();
							};
						};
						//引导：is_guide 1关，2开
						if (this.isNewPage && res.data.is_guide == '2' && !uni
							.getStorageSync('guide')) {
							this.guide = 'show';
						};
						
						if (this.isNewPage) {
							this._checkScroll();
						};
						// 首页弹窗
						this.isCommonPopup = res.data.tan.length > 0;
						if (res.data.tan.length > 0) {
							this.activityImg = res.data.tan[0].img;
							let obj = res.data.tan[0];
							let activity = {
								image: obj.img,
								originalData: obj,
							};
							this.activityData = activity;

						};
							if (this.guide == 'hide' && this.isCommonPopup) {
								this.activityPopupShow = true;
							};
						//用户再次调用首页数据查询接口时，是否显示通用活动弹窗，这里是没引导图在的时候，引导图在的时候逻辑在watch里监听
						
						//需要弹弹窗时要把弹窗中其它数据要先给弹窗组件传递进去。
						if (this.isCommonPopup) {
							this.popupData = {
								txt: res.data.tan[0].popup,
								from: 1, //给弹窗组件里面传，区分是哪个页面的弹窗，首页1，时间选择页面弹窗2;
								abc: res.data.tan[0]
									.index, //给弹窗组件里面传，啥意思不知道凑活传;
								time: res.data.tan[0].times, //弹窗中倒计时时间
							};
						};

						//老页面的时候数据
						this.oldData = {
							activityShow: res.data.battery_button ==
								2, //h5活动按钮
							activityName: res.data.battery_button_name, //活动名称
							activityUrl: res.data
								.battery_button_url, //活动要跳转的h5地址
						};
						//向vuex中存入运维电话，底部组件customer-service中的本小区运维手机号展示
						this.$u.vuex('maintain_phone', res.data.operator_phone);

						//播放语音
						if (res.data.voice.open == '1') {
							this.$utils.playAudio(res.data.voice.voice);
						};
						//粘贴板
						if(this.is_paste){
						  this.getPastes();		
						}else{
						  this.getPaste();		
						}
						// 判断隐私政策是否成功拉起
					    let privaShow = uni.getStorageSync('privaShow');
						//隐私政策
						if(privaShow == 1){
						 this.isPopupShow = true;
						}
						
	
					}
				}).catch(() => {});
			},
			//授权弹窗
			handleUserInfo() {
				//*微信
				// #ifdef	MP-WEIXIN
				uni.getUserProfile({
					desc: '获取用户信息',
					success: res => {
						let params = {
							encryptedData: res.encryptedData,
							iv: res.iv,
							rawData: res.rawData,
						};
						this.getCodeLoginRequest(params);
					}
				})
				// #endif

				//*支付宝
				// #ifdef	MP-ALIPAY
				this.getCodeLoginRequest({}, true);
				// #endif

			},
			handlePersonalCenterClick() {
				/* uni.navigateTo({
					url: '/pages/webview/save-money',
				}); */
				uni.navigateTo({
					url: '/pages/person/personalCenter',
				});
			},
			//menu
			handleMenuClick(url, originalData ) {
				console.log(originalData,'originalData');
				//half_screen 半屏小程序 1 是 2 不是
				if(originalData.half_screen == 1){
					this.$utils.halfScreen(originalData.car_shop_appid, originalData.url_platform);
				}else{
					//secondary == 2 直接跳转 否则 先打开弹窗
					if (originalData.secondary == 2) {
						this.currentMenu = {
							url,
							originalData,
							from: '2',
						};
						this.$u.debounce(this._menuDebounce, this.$debounceTime, true);
					} else {
						this.activityImg = originalData.secondary_img;
						let obj = originalData;
						let activity = {
							image: obj.img,
							originalData: obj,
						};
						this.activityData = activity;
						this.activityPopupShow = true;
					}
				}
			},
			_menuDebounce() {

				if (this.currentMenu.url == '/pages/charge/index') {
					//有没有授权过手机号
					let userPhone = uni.getStorageSync('userPhone');
					if (!this.isPhoneAuthorization && !userPhone) {
						uni.navigateTo({
							url: '/pages/charge/authorization',
						});
						return false;
					};

					if (this.isJumpTimeSelection) {
						console.log(2);
						this._jumpPage(this.coreData, this.scanCodeUrl, true);
						return false;
					};

					if (this.isOnlyCode) {
						console.log(3);
						this._onlyCode();
						return false;
					};
				};
				console.log(1111);
				this.$utils.oldCommonJump(this.currentMenu);
			},
			//banner
			handleBannerClick(index) {
				//half_screen 半屏小程序 1 是 2 不是
				if(this.bannerList[index].originalData.half_screen == 1){
					this.$utils.halfScreen(this.bannerList[index].originalData.car_shop_appid, this.bannerList[index].originalData.url_platform);
				}else{
				if (this.bannerList[index].originalData.secondary == 2) {
					this.currentBanner = {
						originalData: this.bannerList[index].originalData,
						from: '1',
					};
					this.$u.debounce(this._bannerDebounce, this.$debounceTime, true);
				} else {
					this.activityImg = this.bannerList[index].originalData.secondary_img;
					let obj = this.bannerList[index].originalData;
					let activity = {
						image: obj.img,
						originalData: obj,
					};
					this.activityData = activity;
					this.activityPopupShow = true;
				}
				}
			},
			// 悬浮框
			floaTingFn() {
				uni.navigateTo({
					url: '/pages/makeMoney/index',
				});
			},
			_bannerDebounce() {
				this.$utils.oldCommonJump(this.currentBanner);
			},
			//guide---start
			_checkScroll() {
				//检测页面有没有滚动条
				const query = uni.createSelectorQuery().in(this);
				query.select('.content').boundingClientRect(data => {


					if (data.height > uni.getSystemInfoSync().windowHeight) {
						this.isScroll = true;
					} else {
						this.isScroll = false;
					};
					//*支付宝就当页面一直有滚动条。
					// #ifdef	MP-ALIPAY
					this.isScroll = true;
					// #endif


				}).exec();
			},
			handleGuideJump() {
				this._resetGuide();
			},
			_resetGuide() {
				this.guide = 'hide';
				uni.setStorageSync('guide', 'hide');
				this.guideStatus = 1;
				this.$nextTick(function() {
					uni.pageScrollTo({
						scrollTop: 0
					});
				})
			},
			handleNextClick1() {
				this.guideStatus = 2;
			},
			handleNextClick2() {

				if (this.isScroll && this.guide == 'show') {
					this.guideStatus = null;
					let _this = this;
					this.$nextTick(function() {
						uni.pageScrollTo({
							scrollTop: 500,
							success() {
								_this.guideStatus = 3;
							}
						});
					})
				} else {
					this.guideStatus = 3;
				};
			},
			//guide---end
			//Start charging click
			handleStartChargingClick() {
				// 引导图是否存在
				if (this.guide == 'hide') {
					let userPhone = uni.getStorageSync('userPhone');
					if (!this.isPhoneAuthorization && !userPhone) {
						uni.navigateTo({
							url: '/pages/charge/authorization',
						});
						return false;
					};
					if (this.isJumpTimeSelection && this.startChargingJump ==
						'/pages/charge/index') {
						this._jumpPage(this.coreData, this.scanCodeUrl, true);
						return false;
					};
					if (this.isOnlyCode) {
						this._onlyCode();
						return false;
					};
					uni.navigateTo({
						url: this.startChargingJump
					});
				} else {

					this.handleGuideJump();
				};
			},
			//微信app扫码
			_wxScanCode(options) {

	
				// #ifdef	MP-WEIXIN
				let qrcodeParam = options.q;
				// #endif

				// #ifdef	MP-ALIPAY
				let qrcodeParam = uni.getStorageSync('qrcodeParam') ||
					undefined; //缓存中存的外部二维码参数
				// #endif



				if (qrcodeParam) {

					// #ifdef	MP-WEIXIN
					let url = decodeURIComponent(qrcodeParam);
					// #endif

					// #ifdef	MP-ALIPAY
					let url = qrcodeParam;
					// #endif

					//1.设备码种类
					let isEquipment1 = this.$utils.getQueryStringByName(url, 's') ? true :
						false;
					let isEquipment2 = url.indexOf('?') == '-1' ? true : false;
					//2.新用户种类
					let user = this.$utils.getQueryStringByName(url, 'userid') ||
						'';
					//3.其余活动种类
					this.scanCodeUrl = url;
					if (user) {
						this.user = user;
					} else if (isEquipment1 || isEquipment2) {
						this.isEquipment = true;
					} else {
						this.isActivity = true;
						let fan = this.$utils.getQueryStringByName(url, 'ha') || '';
						if (fan) {
							this.isFan = true;
						};
					};
				}
			},
			//---设备码类
			portOpenRequest() {
				let str = this.scanCodeUrl;
				uni.setStorageSync('scanCodeUrl', this.scanCodeUrl);
				this.$u.api.portOpen({
					str,
				}).then(res => {
					//关闭开关
					this.onOff = false;
					if (res.result_code == '300') {

						this.coreData = res.data;

						this.$u.vuex('maintain_phone', res.data.operator_phone);
						if (this.isNewPage) {
							//新版首页时
							this.isJumpTimeSelection = true;
							this.getIndexDataRequest();
						} else {
							//如果是老首页
							this._jumpPage(this.coreData, this.scanCodeUrl, true);
						}

					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
							callback: (bool) => {

							}
						});


						this._resetQrcodeData();
					};

				}).catch(() => {
					this.onOff = false;

					this._resetQrcodeData();
				});

			},

			_jumpPage(data, str, isScanCode) {
				//cache data and jump 缓存数据和跳转
				try {
					uni.setStorageSync('mainStr', str);
					uni.setStorage({
						key: 'coreData',
						data,
						success: () => {
							//isScanCode==1 获取过位置
							let is_scan_code = isScanCode ? 1 : 0;


							this._resetQrcodeData();
							
							uni.reLaunch({
								url: '/pages/charge/start?is_scan_code=' +
									is_scan_code
							});
						}
					});
				} catch (e) {
					//error
				}
			},
			//---活动类型相关
			activityRequest() {
				this.$u.api.getCodeActivity({
					qrcode: this.scanCodeUrl,
				}).then(res => {

					this.onOff = false;

					this._resetQrcodeData();

					if (res.result_code == '500') {
						if (this.isFan) {

							this.$utils.modal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							});
						} else {
								console.log(res.data.url,'res.data.url');
							this._jumpWebviewPage(res.data.url);
						};

					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
							callback: (bool) => {

							}
						});
					};
				}).catch(() => {
					this.onOff = false;

					this._resetQrcodeData();
				});
			},

			_jumpWebviewPage(url) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					this.$utils.jumpWebview(url);
					/* uni.navigateTo({
						url: '/pages/webview/index?url=' +encodeURIComponent(JSON.stringify(url))
					}); */
				}, 500);
			},

			_resetQrcodeData() {

				// #ifdef	MP-ALIPAY
				//进入判断说明是支付宝app扫码进来的。
				if (uni.getStorageSync('qrcodeParam')) {
					uni.removeStorageSync('qrcodeParam');
					//需要重置的首页数据。
					this.scanCodeUrl = '';
					this.user = '';
					this.isEquipment = false;
					this.isActivity = false;
					this.isFan = false;
				};
				// #endif
			},
			//微信app扫码代码结束


			_onlyCode() {
				uni.scanCode({
					success: (res) => {
						this._miniprogramScanCode(res.result);
					}
				});
			},

			_onlyCodeJumpPage(data, str) {

				try {
					uni.setStorageSync('mainStr', str);
					uni.setStorage({
						key: 'coreData',
						data,
						success: () => {
							uni.navigateTo({
								url: '/pages/charge/start?is_scan_code=1'
							});
						}
					});
				} catch (e) {
					// error
				}
			},

			_miniprogramScanCode(url) {
				if (url) {

					//设备码
					let isEquipment1 = this.$utils.getQueryStringByName(url, 's') ? true :
						false;
					let isEquipment2 = url.indexOf('?') == '-1' ? true : false;
					//活动

					if (isEquipment1 || isEquipment2) {
						//设备码类型
						this.$u.api.portOpen({
							str: url,

						}).then(res => {

							if (res.result_code == '300') {
								//向缓存中存入运维电话
								this.$u.vuex('maintain_phone', res.data
									.operator_phone);
								//直接跳转
								this._onlyCodeJumpPage(res.data, url);
							} else {

								this.$utils.modal({
									title: '温馨提示',
									content: res.msg,
									showCancel: false,
									callback: (bool) => {

									}
								});
							};
						}).catch(() => {});
					} else {
						//活动码类型：

						let fan = this.$utils.getQueryStringByName(url, 'ha') || '';
						this.$u.api.getCodeActivity({
							qrcode: url,

						}).then(res => {
							if (res.result_code == '500') {

								if (fan) {

									this.$utils.modal({
										title: '温馨提示',
										content: res.msg,
										showCancel: false
									});
								} else {
										this.$utils.jumpWebview(res.data.url);	
									/* uni.navigateTo({
										url: '/pages/webview/index?url=' +
											res.data.url
									}); */
								};

							} else {
								this.$utils.modal({
									title: '温馨提示',
									content: res.msg,
									showCancel: false,
									callback: (bool) => {

									}
								});
							};
						}).catch(() => {});

					};
				}
			},

			//通用活动弹窗
			handleActivityClick() {
				console.log(this.activityData,'this.activityData');
				this.$utils.oldCommonJump({
					...this.activityData,
					from: '1'
				});
			},
			handleCloseClick() {	
				this.activityPopupShow = false;
			},

			//老页面的部分
			handleOldCircleClick() {
				//是否授权过手机号
				let userPhone = uni.getStorageSync('userPhone');
				if (!this.isPhoneAuthorization && !userPhone) {

					uni.navigateTo({
						url: '/pages/charge/authorization'
					});
					return false;
				};

				uni.navigateTo({
					url: '/pages/charge/index'
				});
			},
			//老页面活动按钮要跳转的地址
			handleOldActivityClick() {
				console.log(this.oldData.activityUrl);
				this.$utils.jumpWebview(this.oldData.activityUrl);
			},
			handleOldProtocolClick() {
				uni.navigateTo({
					url: '/pages/member/benefits?state=3'
				});
			},
		},

	}
</script>

<style lang="scss" scoped>
	.content-box {
		position: relative;
	}

	.home-float {
		position: fixed;
		z-index: 99;
	}

	.content.scroll {
		overflow: hidden !important;
		height: 100%;
	}

	.root-node {
		height: 100%;
		background: #fff;
	}

	.root-bg {
		background: #F0F0F0 !important;
	}

	.content.posi {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1000;
		overflow: hidden;
	}

	.top {
		overflow: hidden;
		width: 100%;
		border-radius: 0 0 3000px 3000px / 0 0 300px 300px;
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.top-height {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.top-bg {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
		overflow: hidden;

	}

	/*  #ifdef MP-WEIXIN */
	.notice-bar {
		padding: 0 30rpx;
		height: 52rpx;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.notice-bar {
		padding: 0 30rpx;
		height: 38rpx;
	}

	/*  #endif  */
	.notice-new {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.logo {
		position: relative;
		z-index: 20;
	}

	.logo-image {
		width: 200rpx;
		height: 60rpx;
		vertical-align: middle;
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.icon-01,
	.icon-02,
	.icon-03 {
		position: absolute;
		z-index: 10;
	}

	.icon-01 {
		width: 100rpx;
		top: 150rpx;
		right: 30rpx;
	}

	.icon-02 {
		width: 120rpx;
		top: 80rpx;
		right: 0;
	}

	.icon-03 {
		width: 90rpx;
		top: 48rpx;
		left: 0;
	}

	.card {
		padding: 0 30rpx;
		width: 100%;
		height: 200rpx;
		//border-radius: 0 0 3000px 3000px / 0 0 300px 300px;
		overflow: hidden;
		//background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.card-content {
		position: relative;
		display: flex;
		align-items: center;
		z-index: 20;
		height: 210rpx;
		// padding: 0 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: linear-gradient(to right, #000000, #434343);
		//原背景图 background: url(https://images.cd1a.cn/applet_img_bank/uni/index/card.png) no-repeat 40% top/140% 100%;
	}

	.card-content-img1 {
		position: fixed;
		top: 23%;
		right: 30rpx;
		width: 150rpx;
		height: 150rpx;
		z-index: 99;
	}

	.card-pos {
		position: relative;
		height: 20rpx;
		width: 20rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.card-position {
		// position: absolute;
		// left: 0;
		// top: 140rpx;
		// z-index: 30;
		// width: 100%;
		// box-sizing: border-box;
		// padding: 0 30rpx;
		// display: flex;
		// align-items: center;
	}

	.card-button {
		position: absolute;
		right: 40rpx;
		top: 60rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 14rpx;
		margin-left: 40rpx;
		border-radius: 50rpx;
	}

	.card-title {
		font-weight: 600;
		color: #FFFFFF;
		font-size: 30rpx;
		padding-left: 14rpx;
		border-left: 4rpx solid #0DA297;
		line-height: 1;
		margin-bottom: 12rpx;
	}


	.card-address {
		display: inline-block;
		width: 280rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #FFFFFF;
		font-size: 20rpx;
		vertical-align: middle;
	}
	.card-addresss {
		display: inline-block;
		width: 100%;
		text-align: center;
		text-overflow: ellipsis;
		color: #FFFFFF;
		font-size: 20rpx;
		vertical-align: middle;
	}
	
	/*  #ifdef MP-WEIXIN */
	.menu-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.swiper-wrap {
		overflow: hidden;
		height: 644rpx;
	}

	.swiper {
		height: 644rpx;
	}

	.item-swiper {
		width: 48%;
		float: left;
		position: relative;
		margin-bottom: 4%;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.menu-img {
		width: 100%;
		height: 290rpx;
		display: block;
	}

	.swiper-wrap {
		overflow: hidden;
		height: 620rpx;
	}

	.swiper {
		height: 620rpx;
	}

	.item-swiper {
		width: 48%;
		float: left;
		position: relative;
		margin-bottom: 3%;
	}

	/*  #endif  */


	.item-swiper:nth-child(2n+1) {
		margin-right: 4%;
	}

	.item-swiper:nth-child(3),
	.item-swiper:nth-child(4) {
		margin-bottom: 0;
	}

	.item-swiper-main {
		position: absolute;
		left: 20rpx;
		top: 30rpx;
	}

	/*  #ifdef MP-WEIXIN */
	.menu {

		padding-bottom: 0;
		padding-top: 30rpx;
		position: relative;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.menu {

		padding-bottom: 0;
		padding-top: 20rpx;
		position: relative;
	}

	/*  #endif  */

	.swiper-wrap {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.swiper-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		padding-bottom: 10rpx;
	}

	.swiper-content {
		font-size: 24rpx;
		color: #999;

	}

	/*  #ifdef MP-WEIXIN */
	.banner {
		padding: 20rpx 40rpx;
		padding-bottom: 40rpx;
	}

	.banner-swiper {
		height: 230rpx;
	}

	.banner-img {
		width: 100%;
		height: 230rpx;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.banner {
		padding: 10rpx 40rpx;
		padding-bottom: 20rpx;
	}

	/*  #endif  */



	.charge {
		text-align: center;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
	}

	.charge.charge-posi {
		z-index: 4000;
	}

	.charge-img {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	.flash-img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 50%;
	}

	.charge-content {
		position: absolute;
		left: 0;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.fixed-box {
		pointer-events: none; // 这里是重点，盒子可穿透操作
		width: 100vw;
		height: 90vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2000;
	}

	.fixed-button {
		pointer-events: auto;
		width: max-content;
		height: auto;


		display: flex;
		align-items: center;
		justify-content: center;
		//控制按钮在页面的位置
		left: 0rpx;
		top: 800rpx;

	}

	.customer-service {

		width: 112rpx;
		height: 112rpx;
		background-color: #4CBBAF;
		border-radius: 0 56rpx 56rpx 0;
		font-size: 20rpx;
		padding-right: 10rpx;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		overflow: hidden;

	}

	.sign-btn-contact {
		position: absolute;
		width: 112rpx;
		height: 112rpx;
		opacity: 0;
		border-radius: 0 56rpx 56rpx 0;

	}

	.customer-service-img {
		margin-top: 20rpx;
		width: 38rpx;
		height: 38rpx;

	}

	.bottom-padding {
		padding-bottom: 100rpx;
	}

	.avatar-posi {
		position: relative;
		margin-right: 10rpx;
	}

	.avatar-button {
		width: 100rpx;
		height: 100rpx;
		margin-right: 14rpx;
		margin-left: 40rpx;
		border-radius: 50%;
		padding: 0;
		border: 1px solid transparent;
	}

	.vip-avatar {
		position: absolute;
		right: 0;
		top: 0;
		width: 40rpx;
		height: 40rpx;
		z-index: 999;
	}

	.user-weixin {
		padding: 0;
		width: 128rpx;
		height: 50rpx;
		background: linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%);
		color: #1B1B1B;
		border-radius: 25rpx;
		font-size: 22rpx
	}

	//guide

	.guide-container {
		position: fixed;
		z-index: 3000;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;

	}

	/*  #ifdef MP-WEIXIN */
	.guide-01-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 344rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.guide-01-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 330rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	/*  #endif  */




	.guide-01-img-wrap {
		width: 336rpx;
		position: relative;
	}

	.guide-01-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.guide-01 {
		width: 144rpx;
		height: 282rpx;
		display: block;
		margin-left: 180rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.guide-01-tips {
		text-align: center;

	}

	.guide-01-tips>view {
		border: 1px solid #fff;
		border-radius: 20rpx;
		padding: 8px 14px;
		font-size: 30rpx;
		color: #fff;
		display: inline-block;
	}

	.guide-01-bottom {
		padding-top: 60rpx;
		text-align: center;
	}

	.guide-01-jump {
		margin-right: 40rpx;
	}

	.guide-01-jump,
	.guide-01-next {
		width: 200rpx;
		height: 40px;
		line-height: 38px;
		font-size: 30rpx;
		color: #fff;
		display: inline-block;
		border: 1px solid #fff;
		border-radius: 20rpx;
	}

	/*  #ifdef MP-WEIXIN */
	.guide-02-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 186rpx;
		box-sizing: border-box;
	}

	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.guide-02-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 172rpx;
		box-sizing: border-box;
	}

	/*  #endif  */


	.guide-02 {
		width: 212rpx;
		height: 130px;
		vertical-align: middle;
	}

	.guide-02-btn-wrap {
		text-align: right;
		padding-right: 60rpx;
	}

	.guide-02-btn {
		display: inline-block;
	}

	.guide-02-btn text {
		margin-bottom: 20rpx;
		display: inline-block;
		width: 70px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		border-radius: 13px;
		background: linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%);
		font-size: 22rpx;
	}

	.guide-02-img {
		text-align: right;
		padding-right: 156rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.guide-03 {
		width: 72px;
		height: 141px;
		vertical-align: middle;
	}

	.guide-03-tips {
		padding: 30px 0;
	}

	.guide-03-img {
		text-align: center;
	}

	.guide-03-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 330rpx;
		box-sizing: border-box;

	}

	.card-userinfo {
		width: 128rpx;
		height: 50rpx;
		padding: 0 20rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 25rpx;
		color: #1B1B1B;
		background: linear-gradient(45deg, #E3C086 0%, #F8E0BC 100%);
		font-size: 22rpx;

	}

	.old-top {
		box-sizing: border-box;
		padding-top: 100rpx;
		position: relative;
		height: 750rpx;
		background: url(https://images.cd1a.cn/applet_img_bank/uni/index/old_01.jpg) no-repeat left top/100% 100%;
	}

	.old-top-circle {
		position: absolute;
		left: 50%;
		bottom: 170rpx;
		transform: translateX(-50%);
		width: 440rpx;
		height: 440rpx;
		border-radius: 50%;

	}

	.old-protocol {
		position: absolute;
		left: 0;
		width: 100%;
		bottom: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
	}

	.old-btn {
		padding-top: 86rpx;
		width: 420rpx;
		margin: 0 auto;
	}

	.old-btn-item {
		padding-bottom: 40rpx;
	}

	.old-notice-bar {
		padding-top: 40rpx;
	}
</style>
<style>
	page {
		overflow-x: hidden;
		background: #F0F0F0;
		height: 100%;
	}
</style>